// 登录表单逻辑（参考之前提供的代码）
import { Form, Input, Button, message } from 'antd';
import axios from 'axios';
import React from 'react';
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate 钩子用于页面跳转
import './Login.css'; // 引入样式文件

const Login = () => {
    const navigate = useNavigate(); // 获取 navigate 函数

    const onFinish = (values) => {
        axios.post('/api/users/login', values)
            .then(res => {
                console.log('获取到的响应信息：', res.data);
                const token  = res.data.data.token;
                // 打印 token 信息到控制台
                console.log('获取到的 token 信息：', token);
                if (token) {
                    // 如果 token 存在，跳转到 UserList 页面
                    navigate('/home');
                } else {
                    // 如果 token 为空，提示登录失败
                    message.error('登录失败，请检查用户名和密码');
                }
            })
            .catch(error => {
                // 处理请求错误
                if (error.response) {
                    // 服务器返回了错误状态码
                    message.error('登录失败：' + error.response.data.error);
                } else if (error.request) {
                    // 请求已发送，但没有收到响应
                    message.error('无服务器响应，请稍后重试');
                } else {
                    // 其他错误
                    message.error('登录失败：' + error.message);
                }
            });
    };

    return (
        <div className="login-container">
            <img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" className="login-logo" />
            <Form onFinish={onFinish} className="login-form">
                <Form.Item label="用户名" name="username">
                    <Input />
                </Form.Item>
                <Form.Item label="密码" name="password">
                    <Input.Password />
                </Form.Item>
                <Button type="primary" htmlType="submit" className="login-button">登录</Button>
            </Form>
        </div>
    );
};

export default Login;